<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding-bottom: 800px;
            padding-left: 30px;
        }
        .menu{
            list-style: none;
            padding: 0px;
            margin: 0px;
            display: flex;
            flex-flow: row nowrap;
            font-weight: bold;
        }
        .menu li{
            margin: 0px 10px;
            padding: 16px 24px;
            cursor: pointer;
            user-select: none;
        }
        .menu li:hover{
            color: orange;
        }
        .cbox{
            border: 1px solid #999;
            padding: 20px;
            margin: 10px 0px;
        }
    </style>
</head>
<body>
    <div id="app">
        <ul class="menu">
            <li @click="changePage('HomePage')">首页</li>
            <li @click="changePage('ListPage')">列表</li>
            <li @click="changePage('AboutPage')">关于我</li>
        </ul>
        <hr>
        <keep-alive>
            <component :is="pageName"></component>
        </keep-alive>
        <hr>
    </div>
    <script type="module">
        // 加载 Vue3 的ESM 模块文件
        import { createApp } from "../../assets/vue3/vue.esm-browser.js"
        const HomePage = {
            name:"HomePage",
            template:`
            <div class="cbox">
                <h4>首页{{ num }}</h4>
            </div>
            `,
            data() {
                return {
                    num: 0
                }
            },
            activated(){
                console.log("home-activated");
                this.$timer = setInterval(()=>{
                    this.num++
                },500)
            },
            deactivated(){
                console.log("home-deactivated");
                clearInterval(this.$timer)
            }
            // created () {
            //     this.$timer = setInterval(()=>{
            //         this.num++
            //     },500)
            // },
            // unmounted(){
            //     clearInterval(this.$timer)
            // }
        }
        const ListPage = {
            name:"ListPage",
            template:`
            <div class="cbox">
                <h4>列表</h4>
            </div>
            `,
        }
        const AboutPage = {
            name:"AboutPage",
            template:`
            <div class="cbox">
                <h4>关于我</h4>
            </div>
            `,
        }
        createApp({
            components: {
                HomePage,ListPage,AboutPage
            },
            data(){
                return {
                    pageName:"HomePage"
                }
            },
            methods: {
                changePage(name) {
                    this.pageName = name;
                    location.hash = this.pageName;
                },
                initShowPage(){
                    let hashName = location.hash;
                    console.log(hashName);
                    if(hashName==""){
                        return;
                    }
                    this.pageName = hashName.replace(/^#/,"");
                }
            },
            created () {
                this.initShowPage()
            },
        }).mount("#app")
    </script>
</body>
</html>